iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
0

上一篇我們有說到,想要在HTML中加入JavaScript,只要在<head>或是<body>中加入<script></script>標籤,就可以在裡面寫入JavaScript的程式語法了。
今天就直接來個程式碼的範例吧!

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript</title>
</head>
<body>
   
   <script type="text/javascript">
       function ChangeIt(){
       var NewWords=document.getElementById("SentenceBox").value;
       document.getElementById("NewSentence").innerHTML=NewWords;
       }
</script>

<p id="NewSentence">更改文字!</p>
<input type="text" id="SentenceBox">
<input type="button" value="變!" onclick="ChangeIt()">
</body>
</html>

增加互動性顧名思義就是要讓使用者在網頁做了某個動作時,網頁能有所回應。
本範例中我們所設計的功能就是當使用者在box中輸入一句新的話並按下旁邊寫著"變!"的按鈕,上面那一行字就會變成剛剛使用者輸入的字。

innerHTML讓我們可以直接設定HTML裡面的東西,只要再加上getElementById和HTML裡面的id名字,就可以對該id做設定。

參考資料:https://www.wibibi.com/info.php?tid=400


上一篇
Day28-JavaScript語法(1)
下一篇
Day30-每個人都可以做出理想中的網站!
系列文
每個人都可以做出理想中的網站!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言